{% if request.design_mode %}
  <style>
    .pf-ph {
      font-size: 14px !important;
      background: #fafafa;
      padding: 20px;
      text-align: center;
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      margin: 15px;
    }
    .pf-ph span {
      display: block;
      background: #e6f7ff;
      padding: 8px 15px;
      border: 1px solid #91d5ff;
    }
  </style>
{% endif %}
{% if section.settings.section_id.size > 0 %}
  {% assign snippet_name = section.settings.section_id %}
  {% render 'pagefly-settings' %}
  {% render snippet_name %}
{% else %}
  {% if request.design_mode %}
    <div class="pf-ph">
      <h3>PageFly Section</h3>
      <span>No section selected. Please select your section from the list</span>
    </div>
  {% endif %}
{% endif %}

{% schema %}
{
  "name": "PageFly Section",
  "settings": [
    {
      "id": "section_id",
      "type": "select",
      "label": "Sections",
      "options": [
        {
          "label": "Select section",
          "value": ""
        },
        {
          "label": "custom section 1",
          "value": "pf-17ac7f34"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": "Find and edit your section on the [section listing](https://apps.pagefly.io/sections)"
    },
    {
      "type": "paragraph",
      "content": "To add block to a section, please use the App Block element on PageFly section editor."
    }
  ],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "PageFly Section"
    }
  ]
}
{% endschema %}
